<template>
  <div class="mainPad">
    <div class="selectPad">
      <div class="info_img ">
        <img class="listimg" width="200" :src=list.businessImg>
      </div>

      <div class="store_name">
        {{ list.businessName }}
      </div>

      <div class="fee">
        ￥{{list.starPrice}}起送|￥{{list.deliveryPrice}}配送
      </div>

      <div class="fee">
        {{list.businessExplain}}
      </div>
    </div>

    <div class="bussinessPad">
      <ur class="bussinessList">
        <div class="my-3"></div>
        <li v-for="item in foods" :key='item.foodId' class="businessCard">
          <div class="bussinessicon">
            <img class="listimg" :src=item.foodImg>
          </div>

          <div class="list1">
            <div class="font-bold my-1.5">{{ item.foodName }}</div>
            <div>
              {{item.foodExplain}}
            </div>
            <div>￥{{ item.foodPrice }}</div>
          </div>

          <div class="list2">
            <div class="flex justify-end">
              <img @click = "subCount(item)" class="barImg" src="../assets/302jian.png">
              &nbsp;&nbsp;{{item.amount}}&nbsp;&nbsp;
              <img @click = "addCount(item)" class="barImg" src="../assets/301add.png">
            </div>

          </div>

        </li>
      </ur>

    </div>

    <div class="endPad flex flex-row">

      <div class="cart-left">
        <div class="cart-left-icon">
          <img src="../assets/购物车.png">
          <div class="cart-left-icon-quantity">{{totalAmount}}</div>
        </div>
        <div class="cart-left-info">
          <p>￥{{ result }}</p>
          <p>另需配送费{{list.deliveryPrice}}元</p>
        </div>
      </div>
      <div class="cart-right flex-1">
        <div class="cart-right-item" @click="confirmOrder">
          去结算
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
  import {useRoute} from 'vue-router'
  import store, {foodStore} from "../store";
  import {computed, onBeforeMount, onMounted, onUnmounted, reactive, Ref, ref} from "vue";
  import axios from "axios";
  import router from "../router";

  //获取到url中的id
  console.log(useRoute().params.id);

  function setTitle(){
    store.state.tit="商家信息"
  }
  function setDom(){
    store.state.showFooter=0

  }

  function deleteDom(){
    store.state.showFooter=1
  }


  onBeforeMount(()=>{
    setTitle()
    setDom()
  })

  onMounted(()=>{
    getList()
  })

  onUnmounted(()=>{

  })

  const list = ref([])
  const foods =ref([])
  const result = ref(0)
  const totalAmount = ref(0)
  const foodstore = foodStore()

  const getList = () =>{
    axios.get('/path/business/'+ localStorage.getItem('id'),{
    })
        .then(function (res){
          list.value = res.data;
          foods.value=res.data.foods;
          foods.value.forEach((food)=>{
            food.amount=0
          })
          console.log(foods)
        })
  }

  const count = ref(0)
  const addCount = (num) =>{
    num.amount++
    sum()
    sumAmount()
  }
  const subCount = (num) =>{
    num.amount--
    sum()
    sumAmount()
  }

  const sum =() =>{
      result.value=0
      foods.value.forEach((food)=>{
        result.value = result.value + food.foodPrice * food.amount
      })
  }

  const sumAmount =() =>{
    totalAmount.value=0
    foods.value.forEach((food)=>{
      totalAmount.value = totalAmount.value + food.amount
    })
  }

  const conmit= ()=>{
    foodstore.businessAndFoods = list.value
    foodstore.foods = foods.value
    foodstore.totalPrice = result.value
  }

  const confirmOrder = ()=>{
    conmit()
    router.push('/confirmOrder')
  }


</script>

<style scoped>

.mainPad {
  height: 86vh;
  overflow: scroll;
  @apply relative;
}

.businessCard{
  @apply m-1 flex flex-row justify-center content-center items-center
  border border-solid border-gray-100;
}

.bussinessPad .listimg{
  width: 40%;
  @apply w-20 h-20 m-1 justify-self-stretch;
}

.bussinessPad .list1{
  width: 50%;
  @apply flex flex-col m-1 text-sm;
}

.bussinessPad .list2{
  width: 25%;
  @apply flex flex-col text-right text-sm;
}

.info_img{
  @apply w-full flex justify-center items-center my-2;
}

.barImg{
  @apply w-5 h-5 m-1;
}

.store_name{
  @apply w-full flex justify-center items-center font-black text-xl;
}
.fee{
  @apply w-full flex justify-center items-center;
}

.barPad {
  @apply flex flex-row h-16 justify-center content-center items-center
  border border-solid border-gray-300 shadow-lg
  bottom-0 sticky;
}

.endPad{
  @apply w-full h-14 bottom-0 fixed;
}
.endPad .cart-left{

  @apply bg-gray-800 flex flex-auto;
}
.endPad .cart-left .cart-left-icon{

  @apply w-16 h-16 flex justify-center items-center relative -mt-4
  border border-solid border-4 box-border border-gray-700 rounded-full bg-blue-500
  text-base text-white;
}
.endPad .cart-left .cart-left-icon-quantity{
  width: 5vw;
  height: 5vw;
  @apply  border rounded-full bg-red-500 text-white flex justify-center
  items-center absolute -top-1.5 -right-1.5;
}
.endPad .cart-left .cart-left-info p:first-child{
  @apply text-xl text-white top-2;
}
.endPad .cart-left .cart-left-info p:last-child{
  @apply text-base text-gray-300;
}

.endPad .cart-right .cart-right-item{
  width: 100%;
  height: 100%;

  @apply bg-green-500 text-white text-xl flex justify-center items-center font-bold;
}

</style>